<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .headers{
        width: 100%;
        height: 50px;
        background-color: #f5f5f5;
        display: flex;
        gap: 20px;
        align-items: center;
        position: relative;
    }
    .bottom_eee{
        width: 128px;
        height: 53px;
        background: url(img/buttom_eee.png) no-repeat center center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 20px;
        color: white;
        
    }
    .bottom_eee a{
        z-index: 99;
    }
    .bottom_red{
        width: 128px;
        height: 53px;
        background: url(img/bottom_red.png) no-repeat center center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 20px;
        color: white;
        transition: all .3s;
    }
</style>
<body>
    <div class="headers">
        <div class="bottom_red"></div>
        <div class="bottom_eee">
            <a href="javascript:void(0)" class="href_a" name="2024s">2024</a>
        </div>
        <div class="bottom_eee">
            <a href="javascript:void(0)" class="href_a" name="2024s">2024</a>
        </div>
        <div class="bottom_eee">
            <a href="javascript:void(0)" class="href_a" name="2024s">2024</a>
        </div>
        <div class="bottom_eee">
            <a href="javascript:void(0)" class="href_a" name="2024s">2024</a>
        </div>
        <div class="bottom_eee">
            <a href="javascript:void(0)" class="href_a" name="2024s">2024</a>
        </div>
    </div>
</body>
</html>

<script>
(function(){
    var append = document.getElementsByClassName("bottom_eee")
    var bottom_red = document.getElementsByClassName("bottom_red")[0]
    function animationClick(){
        append = Array.from(append)
        append.forEach((item,index)=>{
            item.onclick = function(){
                init(item)
            }
        })
    }
    //初始化
    function init(item){
        //获取元素的位置
        bottom_red.style.position = "absolute"
        bottom_red.style.left = item.getBoundingClientRect().left - 8 + "px"
    }
    animationClick()
    init(append[0])
})()
</script>

